*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.header{
    background-color: rgba(60, 8, 37, 0.719);
    position: relative;
}
body{
    background: url(assets/car.jpeg);
    background-size:cover ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position:center ;
}
.nav-links{
    padding: 10px;
    position: absolute;
    width: 50%;
    height: 60px;
    display: flex;
    left: 25%;

    
}
li{
    text-decoration: none;
    color: black;
    list-style: none;
}
.head_links{
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 10px ;
    text-align: center;
    
}
@media (max-width:350px){
    .head_links{
        font-size: 15px;
        margin-top: 15px;
        text-decoration: uppercase;

    }
    .block3{
        position: absolute;
        
        left: 76%;
    }
    .header .btn{
        position: absolute ;
        left: 85%;
        top: 50%;
        translate: -50% -50%;
        
    }
}
.btn{
    color: white;
    border-radius: 20px;
    border: 2px solid white;
    width: 20%;
    height: 30px;
    background-color: rgb(30, 8, 76);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease 0.8s;
}

.btn:hover{
    background: transparent;

}
.sec1-for-box{
    height: 98vh;
    width: 100%;
    padding: 20px 20px;
}
.container-for-box{
    display: flex;
    height: 100vh;
    width: 100%;
    flex-wrap: wrap;
    position: relative;

}
.block1{
    width: 30%;
    height: 34.5%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    border-radius: 20px;
}
.block2{
    width: 40%;
    height: 13%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    border-radius: 20px;
}
.block3{
    width: 20%;
    height: 13%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    border-radius: 20px;
}
.block4{
    border-radius: 20px;
    width:62%;
    height: 20%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    position: absolute;
    top: 14.5%;
    left: 32%;
}
.block5{
    width: 50%;
    height: 20%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    border-radius: 20px;
    position: absolute;
    top: 35.5%;
}
.block6{
    width: 42.5%;
    border-radius: 20px;
    height: 15%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    position: absolute;
    top: 35.5%;
    left: 51.5%;

}
.block7{
    width: 42.5%;
    height: 45%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    position: absolute;
    top: 51.5%;
    left: 51.5%;
    border-radius: 20px;
}
.block8{
    width: 26%;
    height: 10%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    position: absolute;
    top: 56%;
    border-radius: 20px;
    
}
.block9{
    width: 23%;
    height: 10%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    position: absolute;
    top: 56%;
    left: 27%;
    border-radius: 20px;
    
}
.block10{
    width: 50%;
    height:30%;
    box-shadow: 0 .5rem 1rem black;
    margin: 5px;
    position: absolute;
    top: 67%;
    border-radius: 20px;
    
}
.image1{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    cursor: pointer;
}
.image2{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    cursor: pointer;
}
.image3{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    cursor: pointer;
}
.image4{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    cursor: pointer;
}
.image5{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 20px;
}
.image6{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 20px;
}
.image7{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 20px;
}
.image8{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
}
.image9{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
}
.image10{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 20px;
}






@media (min-width:351px){
    .head_links{
        font-size: 15px;
        margin: 0 auto;

    }
    .btn{
        left: 37%;
        width: 27%;
    }
}
@media (min-width:500px){
    .head_links{
        font-size: 20px;
        

    }
    .btn{
        left: 35%;
        width: 25%;
        font-size: 10px;
    }
}
@media (min-width:800px){
    .head_links{
        font-size: 30px;
        margin: 0 auto;
        

    }
    .btn{
        left: 43%;
        width: 20%;
        height: 40px;
        font-size: 15px;
    }
    .block1{
        width: 30%;
        height: 50%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        border-radius: 20px;
    }
    .block2{
        width: 30%;
        height: 30%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        border-radius: 20px;
    }
    .block3{
        width: 30%;
        height: 30%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        border-radius: 20px;
    }
    .block4{
        border-radius: 20px;
        width:62%;
        height: 40%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        position: absolute;
        top: 31.5%;
        left: 31.5%;
    }
    .block5{
        width: 50%;
        height: 50%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        border-radius: 20px;
        position: absolute;
        top: 72.5%;
        
    }
    .block6{
        width: 42.5%;
        border-radius: 20px;
        height: 25%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        position: absolute;
        top: 72.5%;
        
        left: 51.5%;
    
    }
    .block7{
        width: 42.5%;
        height: 45%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        position: absolute;
        top: 100%;
        left: 51.5%;
        border-radius: 20px;
       
    }
    .block8{
        width: 30%;
        height: 20%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        position: absolute;
        top: 51.5%;
        border-radius: 20px;
        
        
    }
    .block9{
        width: 42%;
        height: 20%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        position: absolute;
        top: 146%;
        left: 51.5%;
        border-radius: 20px;
        
    }
    .block10{
        width: 50%;
        height:42%;
        box-shadow: 0 .5rem 1rem black;
        margin: 5px;
        position: absolute;
        top: 123.5%;
        border-radius: 20px;
        
    }

    .sec1-for-box{
        height: 168vh;
        width: 100%;
        padding: 20px 20px;
    }




}